import React, { Component } from 'react';

import Mock from "mockjs"; //引入mockjs

// 模拟数据 
let data = Mock.mock({
    "tabList|6": [{
        "id": "@id",
        "title": "@ctitle(3)",
        "children|10": [{
            "id": "@id",
            "img": "@image(50x50,@color)",
            "title": "@ctitle(6)",
            "txt": "@ctitle(10)",
            "price|5-20.2": 5
        }]
    }]
})

export class Tab extends Component {
    constructor(props) {
        super(props)
        this.state = {
            tabList: data.tabList,
            active: 0,//高亮的下标，默认为0
        }
    }
    render() {
        const { tabList, active } = this.state;
        return (
            <div className='tab'>
                <ul className='left'>
                    {
                        tabList.map((item, index) => {
                            return <li key={item.id}
                                onClick={() => {
                                    // 点击切换下标 
                                    console.log("index", index);
                                    this.setState({
                                        active: index
                                    })
                                }}
                                // 通过三元运算符实现判断，当前的下标===active的时候添加on高亮样式
                                className={index === active ? "on" : ""}
                            >
                                {item.title}
                            </li>
                        })
                    }
                </ul>
                <ol className='right'>
                    {/* 通过下标渲染对应的children内容  */}
                    {
                        tabList[active].children.map(item => {
                            return <li key={item.id}>
                                <img src={item.img} alt="" />
                                <p>{item.title}</p>
                                <p>{item.txt}</p>
                                <p>￥{item.price}</p>
                            </li>
                        })
                    }
                </ol>
            </div>
        )
    }
}

export default Tab